import { defineComponent, onUnmounted, reactive } from 'vue'
import Draw from './draw'

export default defineComponent({
  components: {
    Draw,
  },
  setup() {
    let intervalInstance = null
    const cdata = reactive({
			xData: ['日订单量', '新增用户数', 'GMV总额', '支付转化率', '客单价', '退款率'],
			seriesData: [
				{ value: 12, name: '日订单量' },
				{ value: 35, name: '新增用户数' },
				{ value: 49, name: 'GMV总额' },
				{ value: 38.2, name: '支付转化率' },
				{ value: 26, name: '客单价' },
				{ value: 2.3, name: '退款率' }
			]
		})
    intervalInstance = setInterval(() => {
      const data = cdata.seriesData
      cdata.seriesData = data.map((e) => {
        return { value: e.value + 10, name: e.name }
      })
    }, 1000)

    onUnmounted(() => {
      clearInterval(intervalInstance)
    })
    return () => {
      return (
        <div>
          <Draw cdata={cdata} />
        </div>
      )
    }
  },
})
